<!-- src/components/LanguageSwitcher.vue -->
<template>
  <div class="relative" v-click-outside="closeDropdown">
    <button
        class="flex items-center space-x-2 bg-white px-4 py-2 rounded-button text-gray-700 hover:bg-gray-50 transition-colors duration-200"
        @click="toggleDropdown"
    >
      <i class="fas fa-globe text-gray-500"></i>
      <span class="text-sm">{{ currentLanguage.label }}</span>
      <i class="fas fa-chevron-down text-gray-500 text-xs transition-transform" :class="{ 'rotate-180': showDropdown }"></i>
    </button>

    <div
        v-show="showDropdown"
        class="absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded-lg shadow-lg z-50"
    >
      <div
          v-for="lang in languages"
          :key="lang.value"
          class="px-4 py-2 text-sm cursor-pointer hover:bg-gray-50"
          :class="{ 'bg-gray-100': lang.value === currentLanguage.value }"
          @click="changeLanguage(lang)"
      >
        {{ lang.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDropdown: false,
      languages: [
        { value: 'zh-CN', label: '简体中文' },
        { value: 'en', label: 'English' }
      ],
      currentLanguage: { value: 'zh-CN', label: '简体中文' }
    }
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown
    },
    closeDropdown() {
      this.showDropdown = false
    },
    changeLanguage(lang) {
      this.currentLanguage = lang
      this.$i18n.locale = lang.value // 如果使用了vue-i18n
      this.showDropdown = false
      // 这里可以添加语言切换后的回调逻辑
    }
  },
  directives: {
    'click-outside': {
      beforeMount(el, binding) {
        el.clickOutsideEvent = function(event) {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value()
          }
        }
        document.addEventListener('click', el.clickOutsideEvent)
      },
      unmounted(el) {
        document.removeEventListener('click', el.clickOutsideEvent)
      }
    }
  }
}
</script>